<template>
    <div class="box-column container-grid">
        <ux-header-search
            ref="searchHeader"
            v-bind="enquiryData"
            :btnsData="{ permissionsData }"
            @search="onQueryClick"
        ></ux-header-search>
        <div class="box-flex1 table">
            <vxe-grid
                v-bind="tableConfig"
                :data="dataStore.data"
                :columns="table.columns"
            >
                <template v-slot:operate="{ row }">
                    <ux-btn-group
                        :btns="table.btns"
                        :data="{ row, permissionsData }"
                    ></ux-btn-group>
                </template>
            </vxe-grid>
        </div>
        <div class="pagination-el box-row box-center-end">
            <el-pagination
                @size-change="onSizeChange"
                @current-change="onCurrentChange"
                :current-page="dataStore.proxy.page"
                :page-size="dataStore.proxy.pageSize"
                :page-sizes="dataStore.pageSizes"
                :total="dataStore.pagination.total"
                :layout="'total, sizes, prev, pager, next, jumper'"
            ></el-pagination>
        </div>
        <dialogForm
            ref="dialogForm"
            @submitSuccess="onSubmitSuccess"
            @closeDialog="onCloseDialog"
        ></dialogForm>
    </div>
</template>

<script  lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { Action } from "vuex-class";
import { mixinTableStore } from "@/mixin/table/Store";
import { mixinTableHeader } from "@/mixin/table/Header";
import { mixinTableOperation } from "@/mixin/table/Operation";
import { mixinDialogFormParent } from "@/mixin/dialog/FormParent";
import { mixinAccess } from "@/mixin/Access";
import dialogForm from "./Edit.vue";
@Component({
    name: "purviewRoleTable",
    mixins: [
        mixinTableStore,
        mixinTableHeader,
        mixinTableOperation,
        mixinDialogFormParent,
        mixinAccess
    ],
    components: {
        dialogForm
    }
})
export default class purviewRoleTable extends Vue {
    @Action("purviewRole/del") itemDel: any;
    @Action("purviewRole/list") getList: any;

    table: any = {
        btns: [
            {
                label: "编辑",
                condition: ["permissionsData.edit"],
                handleClick: (this as any).onEditClick
            },
            {
                label: "删除",
                condition: ["permissionsData.del"],
                handleClick: (this as any).onDelClick
            }
        ],
        // 列配置
        columns: [
            {
                width: 70,
                type: "seq",
                title: "序号"
            },
            {
                title: "角色名称",
                sortable: true,
                field: "role_name"
            },
            { title: "创建时间", field: "created_at" },
            {
                showOverflow: "ellipsis",
                fixed: "right",
                title: "操作",
                slots: { default: "operate" },
                width: 130
            }
        ]
    };

    // 查询头配置
    enquiryData: any = {
        searchBtn: {
            condition: ["permissionsData.query"]
        },
        fields: [
            {
                field: "role_name",
                label: "角色名称"
            }
        ],
        btns: [
            {
                label: "新增",
                class: "btn-blue",
                icon: "el-icon-plus",
                condition: ["permissionsData.add"],
                handleClick: (this as any).onAddClick
            }
        ]
    };
}
</script>
